<template>
    <div v-if="isVisible" class="info-window-overlay" @click.self="closeWindow">
        <div class="info-window-content">
            <h2>收集信息</h2>
            <form @submit.prevent="submitForm">
                <div class="form-group">
                    <label for="name">发现人:</label>
                    <input type="text" id="name" v-model="formData.name" required />
                </div>
                <div class="form-group">
                    <label for="numberphone">联系方式:</label>
                    <input type="text" id="numberphone" v-model="formData.numberphone" required />
                </div>
                <div class="form-group">
                    <label for="description">失物描述:</label>
                    <textarea id="description" v-model="formData.description"></textarea>
                </div>
                <div class="form-group">
                    <label for="latitude">纬度:</label>
                    <input type="text" id="latitude" v-model="formData.latitude" disabled />
                </div>
                <div class="form-group">
                    <label for="longitude">经度:</label>
                    <input type="text" id="longitude" v-model="formData.longitude" disabled />
                </div>
                <div class="button-group">
                    <button type="submit">提交</button>
                    <button type="button" @click="closeWindow">取消</button>
                </div>
            </form>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import axios from 'axios'; // 假设您使用axios进行HTTP请求

const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  },
  position: {
    type: Object, // { lat: Number, lng: Number }
    default: () => ({ lat: null, lng: null }),
  },
  IDs: {
    type: String,
    default: '',
  }
});

const emit = defineEmits(['close', 'submit']);

const formData = ref({
  name: '',
  description: '',
  latitude: null,
  longitude: null,
  numberphone: null,
  IDs: '',
});

watch(
  () => props.position,
  (newPos) => {
    if (newPos.lat !== null && newPos.lng !== null) {
      formData.value.latitude = newPos.lat.toFixed(6); // 保留6位小数
      formData.value.longitude = newPos.lng.toFixed(6);
    }
  },
  { immediate: true }
);

watch(
  () => props.IDs,
  (newID) => {
    if (newID !== null && newID !== undefined) {
      formData.value.IDs = newID;
    }
  },
  { immediate: true }
);

const closeWindow = () => {
  emit('close');
  // 重置表单数据
  formData.value = {
    name: '',
    description: '',
    latitude: null,
    longitude: null,
    numberphone: null,
    IDs: '',
  };
};

const submitForm = async () => {
  try {
    // 将数据发送到您的SpringBoot后端
    emit('submit', formData.value); // 可以向父组件传递提交的数据
    const response = await axios.post('http://localhost:8080/lost_and_found/add', formData.value);
    if (response.status == 200) { // 假设您的后端返回这样的结构
      alert('信息提交成功！');
      closeWindow();
    } else {
      alert('信息提交失败: ' + response.data.message);
    }
  } catch (error) {
    console.error('提交数据时发生错误:', error);
    alert('信息提交失败，请检查网络或服务器。');
  }
};
</script>

<style scoped>
.info-window-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.info-window-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 500px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.form-group input[type="text"],
.form-group textarea {
  width: calc(100% - 20px); /* 减去padding */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.form-group input[disabled] {
  background-color: #f0f0f0;
  cursor: not-allowed;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.button-group button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.button-group button[type="submit"] {
  background-color: #007bff;
  color: white;
}

.button-group button[type="submit"]:hover {
  background-color: #0056b3;
}

.button-group button[type="button"] {
  background-color: #6c757d;
  color: white;
}

.button-group button[type="button"]:hover {
  background-color: #5a6268;
}
</style>